<template>
<div id="yemian">
<!-- 插槽组件 -->
<div class="bigbox">

<zijian class="box col1">
    <template #jieshao>
        <p>今日活跃用户</p>
    </template>
    <template #num>
        <p>9110</p>
    </template>
    <template #yue>
        <p>本月活跃度</p>
    </template>
    <template #yuenum>
        <p>89%</p>
    </template>
    <template #all>
        <p>整体活跃度</p>
    </template>
    <template #allnum>
        <p>55%</p>
    </template>
</zijian>
<zijian class="box col2">
     <template #jieshao>
        <p>今日新增用户</p>
    </template>
    <template #num>
        <p>1110</p>
    </template>
    <template #yue>
        <p>本月新增</p>
    </template>
    <template #yuenum>
        <p>2511</p>
    </template>
    <template #all>
        <p>累积用户</p>
    </template>
    <template #allnum>
        <p>18.9万</p>
    </template>
</zijian>
<zijian class="box col3">
     <template #jieshao>
        <p>今日订单数</p>
    </template>
    <template #num>
        <p>591</p>
    </template>
    <template #yue>
        <p>本月订单数</p>
    </template>
    <template #yuenum>
        <p>452</p>
    </template>
    <template #all>
        <p>累积订单</p>
    </template>
    <template #allnum>
        <p>467213</p>
    </template>
</zijian>
<zijian class="box col4">
     <template #jieshao>
        <p>今日销售额</p>
    </template>
    <template #num>
        <p>4824</p>
    </template>
    <template #yue>
        <p>本月销售额</p>
    </template>
    <template #yuenum>
        <p>465481</p>
    </template>
    <template #all>
        <p>本月积分消耗</p>
    </template>
    <template #allnum>
        <p>20万</p>
    </template>
</zijian>
</div>
<div class="shuji">
    <div class="tongji">
        <div class="tongjitit">商品统计</div>
        <div class="jieshao" v-for="item in shangping">
        <span class="jiew"> {{item.name}}</span>
        <span class="num">{{item.val}}</span>
        </div>
    </div>
    <div>
     <div id="main" style="width: 800px; height: 400px"></div>    
    </div>
    <div class="bangdan">
          <div class="bangdantit">8月会员积分榜</div>
        <div class="jieshao1" v-for="(item,index) in jifen">
            <span class="jifennum">{{index+1}}</span>
        <span class="name"> {{item.name}}</span>
        <span class="fen">{{item.val}}</span>
        </div>
    </div>
    
</div>
<div class="last">
    <div class="biaoge">
    <el-table id="biaotou" :data="tableData" stripe style="width: 100%">
    <el-table-column prop="num" label="订单编号" width="180" />
    <el-table-column prop="name" label="商品名称" width="180" />
    <el-table-column prop="money" label="订单金额" />
    <el-table-column prop="date" label="下单时间" />
    <el-table-column prop="type" label="订单状态" />
  </el-table>
    </div>
    <div class="rexiao">
        <div class="tongji">
        <div class="tongjitit">热销产品榜</div>
        <div class="jieshao" v-for="item in canpin">
        <span class="jiew"> {{item.name}}</span>
      
        </div>
        </div>
    </div>

</div>

</div>
</template>

<script setup>

import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
import zijian from '../components/zyemk.vue';
const tableData = [
  {
    name: 'Tom',
    num:'465821354872',
    date: '2016-05-03',
    address: 'No. 189, Grove St, Los Angeles',
    money:'300',
    type:"已完成"
  },
  {
    name: '啥地方',
    num:'465821354872',
    date: '2016-05-03',
    address: 'No. 189, Grove St, Los Angeles',
    money:'300',
    type:"待发货"
  },
  {
    name: '第三方',
    num:'465821354872',
    date: '2016-05-03',
    address: 'No. 189, Grove St, Los Angeles',
    money:'300',
    type:"已发货"
  },
  {
    name: '沃尔夫',
    num:'465821354872',
    date: '2016-05-03',
    address: 'No. 189, Grove St, Los Angeles',
    money:'300',
    type:"已完成"
  },
  {
    name: 'daf',
    num:'465821354872',
    date: '2016-05-03',
    address: 'No. 189, Grove St, Los Angeles',
    money:'300',
    type:"已完成"
  },
  {
    name: 'Tohgfm',
    num:'465821354872',
    date: '2016-05-03',
    address: 'No. 189, Grove St, Los Angeles',
    money:'300',
    type:"已完成"
  },
 
]
const shangping=ref(
    [
        {name:'在售商品总数:',val:1350},
        {name:'热销商品总数:',val:2312},
        {name:'促销队列商品数:',val:234},
        {name:'库存警告商品数:',val:13540},
        {name:'下架商品数:',val:8521},
        
    ]
)
const canpin=ref(
    [
        {name:'产品1'},
        {name:'产品2'},
        {name:'产品3'},
        {name:'产品4'},
        {name:'产品5'},
     
      
    ]
)
const jifen=ref(
    [
        {name:'压缩',val:1350},
        {name:'点位',val:2312},
        {name:'安其拉',val:234},
        {name:'王昭君',val:1350},
        {name:'阿道夫',val:8521},
        {name:'666',val:8521},
        {name:'二',val:8521},
        {name:'324',val:8521},
      
        
    ]
)
onMounted(
  () => {
    init()
  }
)
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    title: {
        text: '访问量',
        textStyle: { color: '#666', fontSize: 14, fontWeight: 'normal' },
        padding: [5, 0, 0, 0],
    },
    legend: {
        type: 'plain',
        top: 0,
        right: 10,
        itemGap: 64,
        itemWidth: 10,
        icon: 'circle',
        selectedMode: false,
        textStyle: { padding: [0, 0, 0, 4] },
        data: ['新增登记', '完成服务'],
    },
    grid: { left: 0, top: 40, bottom: 20, right: 10, containLabel: true },
    xAxis: {
        type: 'category',
        data: [
            
            '5',
            '10',
            '15',
            '20',
            '25',
            
          
        ],
        axisLine: { lineStyle: { color: '#ccc' } },
        axisTick: { length: 3 },
        axisLabel: { color: '#999' },
    },
    yAxis: {
        type: 'value',
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { color: '#999' },
        splitLine: { show: false },
    },
    tooltip: {
        trigger: 'axis',
        padding: [12, 17, 20, 23],
        textStyle: { color: '#424242' },
        renderMode: 'html',
        className: 'tooltip',
    },
    series: [
        {
            name: '本月',
            type: 'line',
            data: [40, 80, 20, 75, 90],
            smooth: true, // 平滑曲线
            showSymbol: false,
            itemStyle: { color: '#126EFC' },
            lineStyle: { width: 3, color: '#126EFC' },
            areaStyle: { color: 'rgba(0, 110, 254, 0.1)' },
        },
        {
            name: '上月',
            type: 'line',
            data: [50, 70, 60, 90, 70],
            smooth: true,
            showSymbol: false,
            itemStyle: { color: '#1BB389' },
            lineStyle: { width: 3, color: '#1BB389' },
            areaStyle: { color: 'rgba(27, 179, 137, 0.1)' },
        },
    ],
};
;
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

</script>
<style  scoped>
.last{
    margin-top:60px;
    display: flex;
    justify-content: space-between;
}
.biaoge{
    width: 1000px;
    box-shadow: #ccc 0 0 5px 0;
}

#yemian{
   padding: 0 80px;
   color: white;
   height: 100px;
   }
.bigbox{
display: flex;
justify-content: space-between;
margin-top: 30px;
color: white;
margin-bottom: 40px;
}
.box{
     width: 350px;
    height: 220px;
 

}
.col1{
      background-color: rgb(216,83,79);
}
.col2{
      background-color: rgb(85,172,238);
}
.col3{
      background-color: rgb(0,177,157);
}
.col4{
      background-color: rgb(240,155,9);
}

.tongji{
    width:350px;
    height: 400px;
    box-shadow: #ccc 0 0 5px 0;
}
.tongjitit{
    height: 50px;
    background-color: rgb(216,83,79);
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    margin-bottom: 20px;

}.jieshao{
    color: black;
    height: 60px;
    border-bottom: #ccc 1px solid;
    line-height: 60px;
    margin: 0 20px;
    font-size: 16px;
    /* text-align: center; */
    
}
.jieshao1{
     color: black;
    height: 35px;
    border-bottom: #ccc 1px solid;
    line-height: 35px;
    margin: 0 20px;
    font-size: 16px;
}
.bangdantit{
      height: 50px;
    background-color: rgb(240,155,9);
    text-align: center;
    line-height: 50px;
    font-size: 20px;
      margin-bottom: 20px;
    
}
.jiew{
    width: 220px;
    display: inline-block;
}
.num{
    
    display: inline-block;
    text-align: center;
    width: 80px;
    height: 40px;
    line-height: 40px;
    background-color: rgb(1216,83,79);
;

}
.shuji{
    display: flex;
    justify-content: space-between;
}
.bangdan{
     width:350px;
     border: #ccc 1px solid;
     height: 400px;
     overflow: hidden;
   
}
.name{
    display: inline-block;
    margin-left: 60px;
    width: 80px;
}
.fen{
     margin-left: 40px;
 
}
</style>